import GlobalConfig from "../../conf";
import VCUTable from "../../v-c-u-table";
import { UtilTools } from "../../tools";
import XEUtils from "xe-utils";

export default {
  name: "VcuTableFilter",
  props: {
    filterStore: Object,
  },
  computed: {
    hasCheckOption() {
      const { filterStore } = this;
      return (
        filterStore && filterStore.options.some((option) => option.checked)
      );
    },
  },
  render(h) {
    const { $parent: $xetable, filterStore } = this;
    const { column } = filterStore;
    const filterRender = column ? column.filterRender : null;
    const compConf = filterRender
      ? VCUTable.renderer.get(filterRender.name)
      : null;
    return h(
      "div",
      {
        class: [
          "vcu-table--filter-wrapper",
          "filter--prevent-default",
          compConf && compConf.className ? compConf.className : "",
          {
            "t--animat": $xetable.animat,
            "is--multiple": filterStore.multiple,
            "filter--active": filterStore.visible,
          },
        ],
        style: filterStore.style,
      },
      filterStore.visible
        ? this.renderOptions(h, filterRender, compConf).concat(
            this.renderFooter(h)
          )
        : []
    );
  },
  methods: {
    renderOptions(h, filterRender, compConf) {
      const { $parent: $xetable, filterStore } = this;
      const { args, column, multiple } = filterStore;
      const { slots } = column;
      if (slots && slots.filter) {
        return [
          h(
            "div",
            {
              class: "vcu-table--filter-template",
            },
            slots.filter.call(
              $xetable,
              Object.assign({ $panel: this, context: this }, args),
              h
            )
          ),
        ];
      } else if (compConf && compConf.renderFilter) {
        return [
          h(
            "div",
            {
              class: "vcu-table--filter-template",
            },
            compConf.renderFilter.call(
              $xetable,
              h,
              filterRender,
              Object.assign({ $panel: this, context: this }, args),
              this
            )
          ),
        ];
      }
      let labelTextLength = [];
      XEUtils.arrayEach(filterStore.options, (item) => {
        labelTextLength.push(item.label.length);
      });
      labelTextLength = XEUtils.max(labelTextLength) * 20;
      if (isNaN(labelTextLength)) {
        labelTextLength = 120;
      }
      const { changeAllOption, changeOption } = this;
      return [
        h(
          "div",
          {
            class: "vcu-table--filter-table",
            style: {
              width: `${
                labelTextLength < 120
                  ? 120
                  : labelTextLength > $xetable.$el.clientWidth
                  ? $xetable.$el.clientWidth - 50
                  : labelTextLength
              }px`,
            },
          },
          [
            h(
              "vcuTable",
              {
                key: filterStore.column.id,
                props: {
                  data: filterStore.options,
                  checkboxConfig: {
                    checkField: "checked",
                    labelField: "label",
                    trigger: "row",
                  },
                  maxHeight: filterStore.maxHeight
                    ? filterStore.maxHeight
                    : $xetable.$el.clientHeight > 200
                    ? $xetable.$el.clientHeight - 60
                    : $xetable.$el.clientHeight,
                  showOverflow: true,
                  cellClassName: ({ row }) => {
                    if (!multiple && row.checked) {
                      return "is--checked";
                    }
                  },
                },
                on: {
                  "header-cell-click": changeAllOption,
                  "cell-click": changeOption,
                  "checkbox-all": changeAllOption,
                },
              },
              [
                h("vcuTableColumn", {
                  props: {
                    field: "label",
                    type: multiple ? "checkbox" : "",
                    title: GlobalConfig.i18n("vcu.table.allFilter"),
                  },
                }),
              ]
            ),
          ]
        ),
      ];
    },
    renderFooter(h) {
      const { hasCheckOption, filterStore } = this;
      const { column, multiple } = filterStore;
      const filterRender = column.filterRender;
      const compConf = filterRender
        ? VCUTable.renderer.get(filterRender.name)
        : null;
      const isDisabled =
        !hasCheckOption &&
        !filterStore.isAllSelected &&
        !filterStore.isIndeterminate;
      return multiple && (!compConf || compConf.isFooter !== false)
        ? [
            h(
              "div",
              {
                class: "vcu-table--filter-footer",
              },
              [
                h(
                  "button",
                  {
                    class: {
                      "is--disabled": isDisabled,
                    },
                    attrs: {
                      disabled: isDisabled,
                    },
                    on: {
                      click: this.confirmFilter,
                    },
                  },
                  GlobalConfig.i18n("vcu.table.confirmFilter")
                ),
                h(
                  "button",
                  {
                    on: {
                      click: this.resetFilter,
                    },
                  },
                  GlobalConfig.i18n("vcu.table.resetFilter")
                ),
              ]
            ),
          ]
        : [];
    },
    // 全部筛选事件
    filterCheckAllEvent(evnt, value) {
      const filterStore = this.filterStore;
      filterStore.options.forEach((option) => {
        option._checked = value;
        option.checked = value;
      });
      filterStore.isAllSelected = value;
      filterStore.isIndeterminate = false;
    },

    /*************************
     * Publish methods
     *************************/
    // （单选）筛选发生改变
    changeRadioOption(evnt, checked, item) {
      const { $parent: $xetable, filterStore } = this;
      filterStore.options.forEach((option) => {
        option._checked = false;
      });
      item._checked = checked;
      $xetable.checkFilterOptions();
      this.confirmFilter(evnt);
    },
    // （多选）筛选发生改变
    changeMultipleOption(evnt, checked, item) {
      const { $parent: $xetable } = this;
      item._checked = checked;
      $xetable.checkFilterOptions();
    },
    changeAllOption(parameter) {
      if (this.filterStore.multiple) {
        if (parameter.checked !== undefined) {
          this.filterCheckAllEvent(parameter.$event, parameter.checked);
        }
      } else {
        this.resetFilter(parameter.$event);
      }
    },
    // 筛选发生改变
    changeOption(parameter) {
      if (this.filterStore.multiple) {
        this.changeMultipleOption(
          parameter.$event,
          parameter.row.checked,
          parameter.row
        );
      } else {
        this.changeRadioOption(
          parameter.$event,
          parameter.row.checked,
          parameter.row
        );
      }
    },
    // 确认筛选
    confirmFilter(parameter) {
      const { $parent: $xetable, filterStore } = this;
      filterStore.options.forEach((option) => {
        option.checked = option._checked;
      });
      $xetable.confirmFilterEvent(parameter);
    },
    // 重置筛选
    resetFilter(evnt) {
      const { $parent: $xetable } = this;
      $xetable.resetFilterEvent(evnt);
    },
    /*************************
     * Publish methods
     *************************/
  },
};
